<template>
  <view class="navBar-box" :style="{ 'padding-top': statusBarHeight + 'px' }">
    <uni-nav-bar z-index="78899" height="120rpx" :border="false">
      <template #left>
        <view class="flex flex-a flex-left" @click="back">
          <van-icon name="arrow-left" size="28" color="#000" />
          <!-- <text class="nav-title" v-if="titlePos === 'left'">{{ title }}</text>
          <text class="extraInfo" v-if="extraInfo">-{{ extraInfo }}</text> -->
        </view>
      </template>
      <template #default>
        <view class="default-box">
          <view class="flex flex-a" v-if="!searchStatus">
            <text class="nav-title" v-if="titlePos === 'center'">{{
              title
            }}</text>
            <text class="extraInfo" v-if="extraInfo && titlePos === 'center'"
              >-{{ extraInfo }}</text
            >
          </view>
          <view class="search-input" v-else>
            <uni-easyinput
              suffixIcon="search"
              :border="false"
              v-model="search_data"
              placeholder="请输入内容"
              confirmType="search"
              @iconClick="searchStart"
              @confirm="searchStart"
            ></uni-easyinput>
          </view>
        </view>
      </template>
      <template #right v-if="showAdd">
        <view class="flex flex-a">
          <text
            @click.stop="addClick"
            style="
              color: #000;
              font-size: 50rpx;
              font-weight: 700;
              margin-right: 12rpx;
            "
            >+</text
          >
          <image
            style="width: 70rpx; height: 70rpx; margin-top: 8px"
            @click.stop="changeSearch"
            :src="search"
            mode="scaleToFill"
          />
          <!-- <van-icon
            :name="search"
            size="40px"
            color="#000"
            style=""
          /> -->
        </view>
      </template>
    </uni-nav-bar>
  </view>
</template>

<script setup>
import { ref } from "vue"
import search from "@/static/svgIcon/search.svg"
const emits = defineEmits(["addClick", "search"])
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  showAdd: {
    type: Boolean,
    default: false
  },
  titlePos: {
    type: String,
    default: "center"
  },
  extraInfo: {
    type: String,
    default: ""
  }
})
const statusBarHeight = ref(44)
uni.getSystemInfo({
  success: function (res) {
    console.log("statusBarHeight")
    // 注意：这里假设你在全局或页面级别设置了statusBarHeight

    statusBarHeight.value = res.statusBarHeight
      ? res.statusBarHeight
      : statusBarHeight.value
  }
})
const search_data = ref("")
const searchStatus = ref(false)
const back = () => {
  uni.navigateBack({
    delta: 1
  })
}
const changeSearch = () => {
  searchStatus.value = !searchStatus.value
}
const addClick = () => {
  emits("addClick")
}

const searchStart = () => {
  emits("search", search_data.value)
}
</script>

<style scoped lang="scss">
.nav-title {
  position: relative;
  z-index: 99999;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}

.extraInfo {
  color: #666666;
}

:deep(.uni-navbar__header) {
  padding: 0 10px;
  width: 100%;
}

:deep(.uni-navbar) {
  width: 100%;
}

.navBar-box {
  width: 100vw;
}

.default-box {
  display: flex;
  justify-content: center;
  width: 100%;
}

.search-input {
  display: flex;
  align-items: center;
}

.flex-left {
  width: 100%;
}
</style>
